{% extends "base.jinja2" %}

{# PRE-HEADER#}
{% block pre_header %}

    {% include 'charts/chart_preheader.jinja2' %}

{% endblock pre_header %}

{# BREADCRUMBS #}
{% block breadcrumbs %}

    {% set page_title='Dashboard' %}
    {% include 'breadcrumb/breadcrumbs.jinja2' %}

{% endblock breadcrumbs %}

{# SIDEBAR #}
{% block sidebar %}

    {% include 'sidebar.jinja2' %}

{% endblock sidebar %}

{# PAGE-CONTENT #}
{% block page_content %}

    {% set page_title='Dashboard' %}
    {% include 'page_header.jinja2' %}

    <div class="row-fluid">
        <div class="span10">
            <div id="infobox"
                 address='/entities/{{ entity.id }}/tasks_stats/'
                 class="infobox-container pull-left">
                {% include 'components/infobox.jinja2' %}
            </div>
        </div>

        <div class="span2">
            <h5 class="green"><i class="icon-bolt"></i> Progress</h5>

            <div class="progress progress-success progress-striped"
                 data-percent="{{ "%2.1f" | format(entity.percent_complete) }}%">
                <div class="bar"
                     style="width: {{ entity.percent_complete }}%;"></div>
            </div>

        </div>
    </div>
    <div class="hr hr8 hr-double"></div>
    <div class="space"></div>
    <div class="row-fluid" id="table_row"></div>

{% endblock page_content %}

{% block extrascripts %}

    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.dataTables.min.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.dataTables.bootstrap.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/stalker/js/dataTable_num-html_sort.js") }}'></script>
    <script src='{{ request.static_url("stalker_pyramid:static/ace/js/jquery.easy-pie-chart.min.js") }}'></script>

    {# ***************************************************************************************#}
    {# Table Template#}

    {% raw %}
    <script id="tmpl_table" type="text/x-dot-template">
        <div class=" span6">
            <div class="widget-container-span">
                <div class="widget-box">
                    <div class="widget-header widget-header-small header-color-{{=it.table_title_color }}">
                        <h4 class="smaller">
                            <i class="icon-list"></i>
                            {{=it.table_title }}
                        </h4>

                        <div class="widget-toolbar">
                            <a href="#" data-action="collapse">
                                <i class="icon-chevron-down"></i>
                            </a>
                        </div>
                    </div>
                    <div class="widget-body">
                        <div class="widget-main no-padding">
                            <div id="{{=it.table_spinner_id }}"
                                 class="well well-sm">

                                <div class="inline middle blue bigger-110"><i
                                        class="icon-spinner icon-spin orange bigger-125"></i>
                                    Loading
                                    content...
                                </div>
                            </div>

                            <table id="{{=it.table_id }}"
                                   class="table table-striped table-bordered table-hover hide">
                                <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Resources</th>
                                    <th>Completed</th>
                                    <th>Status</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>
    {% endraw %}

    {# ***************************************************************************************#}
    {# Task Row Template#}

    {% raw %}
    <script id="tmpl_taskRow" type="text/x-dot-template">
        <tr>
            <td><a href='/tasks/{{=it.task_id }}/view'>{{=it.task_name}}</a>
            </td>
            <td>{{=it.resources}}
            </td>
            <td>
                <div class="progress progress-success">
                    <div style="width:{{=it.percent_complete}}%"
                         class="bar">
                        <span class="pull-left">{{=it.percent_complete}}%</span>
                    </div>
                </div>
            </td>
            <td>
                <span class="label label-{{=it.status_color}}">{{=it.status}}</span>
            </td>

        </tr>
    </script>
    {% endraw %}

    {# ***************************************************************************************#}
    {# Table Creation#}

    <script>
        // fill projects table with dynamic data
        $(document).ready(function () {
            var loadTableData = function (address, tableId, spinnerId) {
                $.getJSON(address).then(function (data) {
                    var task_template = doT.template($('#tmpl_taskRow').html());
                    // wait until document is ready
                    $(function () {
                        var i;
                        var table_body = $('#' + tableId + '>tbody');
                        for (i = 0; i < data.length; i++) {

                            // append it to the table
                            data[i].percent_complete = data[i].percent_complete.toFixed(1);
                            //data[i].status_color = '#' + data[i].status_color.toString(16);

                            table_body.append(task_template(data[i]));
                        }

                        var oTable1 = $('#' + tableId).dataTable({
                            "aoColumns": [
                                null, null, {'sType': 'num-html'}, null
                            ]
                        });
                        // sort desc to completed column
                        oTable1.fnSort([[2, 'desc']]);
                    });
                    $('#' + tableId).show();
                    $('#' + spinnerId).hide();
                });
            };

            var table_template = doT.template($('#tmpl_table').html());
            var table_row = $('#table_row');
            table_row.append(
                table_template({
                    'table_title_color': 'red',
                    'table_title': 'Task In Progress Today',
                    'table_id': 'tasks_in_progress',
                    'table_spinner_id': 'loading_spinner_for_progress'
            })).append(
                table_template({
                    'table_title_color': 'green',
                    'table_title': 'Task Ends Today',
                    'table_id': 'tasks_supposed_to_end',
                    'table_spinner_id': 'loading_spinner_for_end'
                })
            );

            loadTableData('/projects/{{ entity.id }}/tasks/progress/today/', 'tasks_in_progress', 'loading_spinner_for_progress');
            loadTableData('/projects/{{ entity.id }}/tasks/end/today/', 'tasks_supposed_to_end', 'loading_spinner_for_end');
        });

    </script>


{% raw %}
<script id="tmpl_itemThead" type="text/x-dot-template">
    <tr>
        <th>Name</th>
        <th>Resource</th>
        <th>Responsible</th>
        <th>Type</th>
        <th>Completed</th>
        <th></th>
    </tr>
</script>
{% endraw %}


{% raw %}
<script id="tmpl_itemRow" type="text/x-dot-template">
    <tr>

        <td><a href='/tasks/{{=it.id}}/view'>{{=it.name}}</a></td>
        <td>{{ for (var i=0; i< it.resource_id.length;i++) { }}<a href='/users/{{=it.resource_id[i]}}/view'>{{=it.resource_name[i]}}</a><br/>{{ } }}</td>
        <td>{{ for (var j=0; j< it.responsible_id.length;j++) { }}<a href='/users/{{=it.responsible_id[j]}}/view'>{{=it.responsible_name[j]}}</a><br/>{{ } }}</td>
        <td>{{=it.type}}</td>
        <td data-sType="num-html">
            <div class="progress progress-success">
                <div style="width:{{=it.percent_complete}}%"
                     class="bar">
                    <span class="pull-left">{{= it.percent_complete.toFixed(0) }}%</span>
                </div>
            </div>
        </td>
        <td>
                <div class="hidden-phone visible-desktop action-buttons">
                    <a class="blue" href='/tasks/{{=it.id}}/view'>
                        <i class="icon-zoom-in bigger-130"></i>
                    </a>

                    {{ if (it.request_review) { }}
                    <a
                        class="green"
                        data-target="#dialog_template"
                        data-toggle="modal"
                        data-keyboard=false
                        data-rel="tooltip"
                        data-placement="top"
                        title="Request Review"
                        href="/tasks/{{=it.id}}/request_review/dialog?came_from={{=it.came_from }}">
                        <i class="icon-comment-alt bigger-130"></i>
                    </a>
                    {{ } }}
                    {{ if (it.review) { }}
                    <a
                        class="purple"
                        data-target="#dialog_template"
                        data-toggle="modal"
                        data-keyboard=false
                        data-rel="tooltip"
                        data-placement="top"
                        title="Review"
                        href="/tasks/{{=it.id}}/review/dialog?came_from={{=it.came_from }}">
                        <i class="icon-comments bigger-130"></i>
                    </a>
                    {{ } }}

                </div>
        </td>

    </tr>
</script>
{% endraw %}

{% endblock extrascripts %}
